<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size">
			<el-form-item>
				<el-input v-model="filters.name" placeholder="汽车配件相关信息"></el-input>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:user:view" type="primary" @click="findPage(null)"/>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:user:add" type="primary" @click="handleAdd" />
			</el-form-item>
		</el-form>
	</div>
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				<el-tooltip content="导出" placement="top">
					<el-button icon="fa fa-file-excel-o" @click="exportUserExcelFile"></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>

		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
		
	</div>
	<!--表格内容栏-->
	<kt-table permsEdit="sys:user:edit" permsDelete="sys:user:delete"
		:data="pageResult" :columns="filterColumns"
		@findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
	</kt-table>
	<!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
			label-position="right">
			<!-- <el-form-item label="配件编号" prop="cid" v-if="false">
				<el-input v-model="dataForm.cid" :disabled="true" auto-complete="off"></el-input>
			</el-form-item> -->
			<el-form-item label="配件编号" prop="cid" >
				<el-input v-model="dataForm.cid" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="配件名称" prop="cname">
				<el-input v-model="dataForm.cname" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="配件类别" prop="category">
				<el-input v-model="dataForm.category" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="配件厂家" prop="manufacturer">
				<el-input v-model="dataForm.manufacturer" auto-complete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
export default {
	components:{
		PopupTreeInput,
		KtTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			size: 'small',
			filters: {
				name: ''
			},
			columns: [],
			filterColumns: [],
			pageRequest: { pageNum: 1, pageSize: 10},
			pageResult: {},
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {
				name: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }
				]
			},
			// 新增编辑界面数据
			dataForm: {
				cid: '',
				cname: '',
				category: '',
				manufacturer: ''
			},
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			carInfoList: [],
			roles: []
		}
	},
	methods: {
		// 获取分页数据
		findPage: function (data) {
		    if(data !== null) 
			{
				this.pageRequest = data.pageRequest
			}
			
			if(this.filters.name)
			{
				this.pageRequest['searchWord'] = this.filters.name
			}

			console.log(this.pageRequest);

		    this.$api.carinfo.findPage(this.pageRequest).then(
			(res) => {
				console.log("CarInfo.vue findAll")
				console.log(res.data)
				
				this.pageResult = res.data;	
				console.log(this.pageResult)
					// this.findCarInfo()
			}
			).then(data!=null?data.callback:'');
			
		},

		// 导出Excel用户信息
		exportUserExcelFile: function () {
			this.pageRequest.pageSize = 100000
			this.pageRequest.params = [{name:'name', value:this.filters.name}]
			this.$api.user.exportUserExcelFile(this.pageRequest).then((res) => {
				this.$alert(res.data, '导出成功', {
					confirmButtonText: '确定',
					callback: action => {
					}
				})
			})
		},
	
		// 加载用户角色信息
		// findUserRoles: function () {
		// 	this.$api.role.findAll().then((res) => {
		// 		// 加载角色集合
		// 		this.roles = res.data
		// 	})
		// },

		// 加载汽车配件信息
		findCarInfo: function () {
			console.log("findCarInfo")
			this.$api.carinfo.findAll().then((res) => {
				this.carInfoList = res.data
			})
		},

		// 批量删除
		handleDelete: function (data) {
			console.log("--------------handleDelete--------------------")
			this.$api.carinfo.batchDelete(data.params).then(data!=null?data.callback:'')
		},

		// 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm = {
		        cid: 100000,
				cname: '',
				category: '',
				manufacturer: ''
			}
		},

	
		// 显示编辑界面
		handleEdit: function (params) {
			this.dialogVisible = true
			this.operation = false
			this.dataForm = Object.assign({}, params.row)
			let userRoles = []
			// for(let i=0,len=params.row.userRoles.length; i<len; i++) {
			// 	userRoles.push(params.row.userRoles[i].roleId)
			// }
			this.dataForm.userRoles = userRoles
		},
		// 编辑 & 新增
		submitForm: function () {
			
			this.$refs.dataForm.validate((valid) => {
				if (valid) {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						this.editLoading = true
						let params = Object.assign({}, this.dataForm)
						if(this.operation)
						{
							console.log("--------------新增数据-----------------")
							console.log(params)
							this.$api.carinfo.save(params).then((res) => {
							this.editLoading = false
							console.log("-------------11111111--------------------")
							console.log(res)
							if(res.code == 200) {
								this.$message({ message: '新增数据成功', type: 'success' })
								this.dialogVisible = false
								this.$refs['dataForm'].resetFields()
							} else {
								this.$message({message: '操作失败, ' + res.msg, type: 'error'})
							}
							this.findPage(null)
						})
						}
						else
						{
							console.log("--------------编辑数据-----------------")
							this.$api.carinfo.update(params).then((res) => {
							this.editLoading = false
							console.log("-------------11111111--------------------")
							console.log(res)
							if(res.code == 200) {
								this.$message({ message: '操作成功', type: 'success' })
								this.dialogVisible = false
								this.$refs['dataForm'].resetFields()
							} else {
								this.$message({message: '操作失败, ' + res.msg, type: 'error'})
							}
							this.findPage(null)
						})
						}
						
					})
				}
			})
		},
		// 获取部门列表
		findDeptTree: function () {
			this.$api.dept.findDeptTree().then((res) => {
				this.deptData = res.data
			})
		},
		// 菜单树选中
      	deptTreeCurrentChangeHandle (data, node) {
        	this.dataForm.deptId = data.id
        	this.dataForm.deptName = data.name
		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},
		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				{prop:"id", label:"ID", minWidth:50},
				{prop:"cid", label:"配件编号", minWidth:80},
				{prop:"cname", label:"配件名称", minWidth:120},
				{prop:"category", label:"配件类别", minWidth:120},
				{prop:"manufacturer", label:"配件厂家", minWidth:120},
				{prop:"create_time", label:"增加日期", minWidth:100},
				{prop:"update_time", label:"更新日期", minWidth:120},
			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns));
      	}
	},
	mounted() {
		this.findDeptTree()
		this.initColumns()
	}
}
</script>

<style scoped>

</style>